<template>
  <div class="books">
    <div class="filter-bar">
      <div class="categories">
        <span 
          v-for="cat in categories" 
          :key="cat.value"
          :class="{ active: currentCategory === cat.value }"
          @click="selectCategory(cat.value)"
        >
          {{ cat.label }}
        </span>
      </div>
    </div>
    
    <div v-if="loading" class="loading">
      加载中...
    </div>
    <div v-else-if="error" class="error">
      {{ error }}
    </div>
    <div v-else class="book-grid">
      <div v-for="book in books" :key="book.id" class="book-card">
        <router-link :to="`/books/${book.id}`">
          <img :src="book.cover" :alt="book.title">
          <div class="book-info">
            <h3 class="ellipsis-2">{{ book.title }}</h3>
            <div class="book-meta">
              <span class="category">{{ book.category }}</span>
              <span class="author">{{ book.author }}</span>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { bookApi } from '@/api/apis/book'

const categories = [
  { label: '全部', value: '' },
  { label: '小说', value: 'novel' },
  { label: '文学', value: 'literature' },
  { label: '历史', value: 'history' }
]

const currentCategory = ref('')
const books = ref([])
const loading = ref(false)
const error = ref('')

// 获取书籍列表
const fetchBooks = async () => {
  loading.value = true
  error.value = ''
  
  try {
    const params = {
      category: currentCategory.value,
      page: 1,
      pageSize: 20
    }
    
    const res = await bookApi.getBooks(params)
    if (res.code === 200) {
      books.value = res.data.list
    } else {
      error.value = res.message
    }
  } catch (err) {
    error.value = '获取数据失败，请稍后重试'
    console.error('获取书籍列表失败:', err)
  } finally {
    loading.value = false
  }
}

// 选择分类
const selectCategory = (category) => {
  currentCategory.value = category
}

// 监听分类变化
watch(currentCategory, () => {
  fetchBooks()
})

// 页面加载时获取数据
onMounted(() => {
  fetchBooks()
})
</script>

<style scoped lang="scss">
.books {
  padding: 20px;

  .loading,
  .error {
    text-align: center;
    padding: 40px;
    color: #666;
  }

  .filter-bar {
    margin-bottom: 20px;
    .categories {
      span {
        padding: 6px 12px;
        margin-right: 10px;
        cursor: pointer;
        &.active {
          color: #42b983;
          background: #e6f7f0;
          border-radius: 4px;
        }
      }
    }
  }

  .book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
  }

  .book-card {
    background: #fff;
    border-radius: 8px;
    transition: transform 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    
    &:hover {
      transform: translateY(-5px);
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      border-radius: 8px 8px 0 0;
    }

    .book-info {
      padding: 12px;

      h3 {
        margin: 0;
        font-size: 16px;
      }

      p {
        margin: 5px 0;
        color: #666;
        font-size: 14px;
      }

      .book-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
        
        .category {
          color: #42b983;
          font-size: 12px;
        }
        
        .price {
          color: #f56c6c;
          font-weight: bold;
        }
        .author {
          font-size: 12px;
        }
      }
    }
  }
}
</style>